<template>
  <div id="app">
    <m-header></m-header>
    <div class="container container-body">
      <router-view></router-view>
    </div>
    <login></login> 
  </div>
</template>

<script>
import MHeader from 'pages/m-header'
import login from 'pages/login'
export default {
  name: 'App',
  components: {
    'm-header': MHeader,
    'login': login,
  }
}
</script>

<style>
html {
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
}
body, h1, h2, h3, p{
  margin: 0;
}
ul, dl, dt, dd {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
a:hover, a:link, a:visited, a:active {
  text-decoration: none;
  color: #666;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.text-l {
  text-align: left;
}
.text-c {
  text-align: center;
}
.text-r {
  text-align: right;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-15 {
  margin-top: 15px;
}
.ml-15 {
  margin-left: 15px;  
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
* {
  outline: none;
}

body {
  background-color: #F8FAFC;
}

.el-card {
  transition: none;
  -webkit-transition: none;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  text-align: center;
}
.container {
  /*width: 1080px;*/
  margin: 0 auto;
}
.container-body {
  padding: 30px 0 30px;
  overflow: hidden;
}
@media only screen and (min-width:768px) {
  .hidden-xs-and-up {
    display:none!important
  }
}
@media (max-width: 374px){ 
  .container {
    width: 95%;
  }
  .el-card__body {
    padding: 5px;
  }
  .el-pagination.is-background.el-pagination--small .btn-next, 
  .el-pagination.is-background.el-pagination--small .btn-prev, 
  .el-pagination.is-background.el-pagination--small .el-pager li {
    min-width: 25px;
  }
}
@media (min-width: 375px) and (max-width: 767px){
  .container {
    width: 90%;
  }
  .el-card__body {
    padding: 14px;
  }
  .el-pagination.is-background.el-pagination--small .btn-next, 
  .el-pagination.is-background.el-pagination--small .btn-prev, 
  .el-pagination.is-background.el-pagination--small .el-pager li {
    min-width: 25px;
    margin: 0 5px;
  }
  .el-pagination {
    padding: 2px 0px;
  }
}
.cover {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.section-container {
  width: 75%;
}
@media (max-width: 991px) {
  .section-container {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 85%;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .container {
    width: 80%;
  }
}
@media (min-width: 1200px) and (max-width: 1499px)  {
  .container {
    width: 75%;
  }
}
@media (min-width: 1500px) {
  .container {
    width: 70%;
  }
}
</style>
